<template>
	<div class="sdf">
		<div class="box">
			<div class="warpper">
				<div class="imgboxs" v-for="item in list">
					<img :src="item.src" alt="">
					<div class='div'>1111</div>
				</div>

				<!-- 
						<img src="./img/7.jpg" alt=""> -->
			</div>
			<div class="btn" id="btn">
				<span class="left">
					< </span>
						<span class="right"> > </span>
			</div>
			<ul class="points">
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 1,
						title: '1',
						content: '2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					},
					{
						id: 1,
						title: '2',
						content: '2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					},
					{
						id: 1,
						title: '3',
						content: '2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					}, {
						id: 1,
						title: '4',
						content: '2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					}, {
						id: 1,
						title: '5',
						content: '2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					},
					{
						id: 1,
						title: '2',
						content: '2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					},
					{
						id: 1,
						title: '3',
						content: '2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					}, {
						id: 1,
						title: '4',
						content: '2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					}, {
						id: 1,
						title: '5',
						content: '2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					}
				]
			}
		},
		created() {

		},
		mounted() {
			function Swiper3D(contanier, imgs, btns, current = 0, isAutoplay, flag = true, duration = 1000, imgsWidth,
				direction) {
				this.contanier = contanier;
				this.imgs = imgs;
				this.btns = btns;
				this.isAutoplay = isAutoplay;
				this.current = current;
				this.timer = null;
				this.len = imgs.length //图片长度
				this.mlen = Math.floor(this.len / 2);
				this.flag = flag;
				this.duration = duration;
				this.imgsWidth = imgsWidth;
				this.direction = direction;
			this.imgMove()
				let me = this;
				me.contanier.addEventListener('mouseover', () => {
					clearInterval(me.timer);
				})
				me.contanier.addEventListener('mouseout', () => {
					me.timer = setInterval(function() {
						if (me.current >= me.len - 1) {
							me.current = 0
						} else {
							me.current++
						}
						me.imgMove()
						//autoLi()
					}, me.duration)
				})
				for (let i = 0; i < me.btns.length; i++) {
					me.btns[i].addEventListener('click', function() {
						clearInterval(me.timer);
						// 防止狂点击
						if (!me.flag) {
							return
						}
						me.flag = false
						if (i == 0) {
							// 上一张
							if (me.current <= 0) {
								me.current = me.len - 1
							} else {
								me.current--
							}
						} else {
							//下一张
							if (me.current >= me.len - 1) {
								me.current = 0
							} else {
								me.current++
							}
						}
						setTimeout(function() {
							me.flag = true
						}, 100)

						me.imgMove()
					})
				}
				if (me.isAutoplay) {
					clearInterval(me.timer);
					me.timer = setInterval(function() {
						if (me.current >= me.len - 1) {
							me.current = 0
						} else {
							me.current++
						}
						me.imgMove()
					}, me.duration)
				}
			}
			Swiper3D.prototype = {
				constructor: Swiper3D,
				imgMove: function() {
					for (let i = 0; i < this.mlen; i++) {
						// 当前播放图片索引值
						var rimg = this.current + 1 + i
						var limg = this.len + this.current - 1 - i
						if (rimg >= this.len) {
							rimg -= this.len
						}
						if (limg >= this.len) {
							limg -= this.len
						}
						if (this.direction == 'left') {
							this.imgs[rimg].style.transform = "translateX(" + (+this.imgsWidth * (i + 1)) + "px)" + " " +
								"translateZ(" + (0) + "px)";
							this.imgs[limg].style.transform = "translateX(" + (-this.imgsWidth * (i + 1)) + "px)" + " " +
								"translateZ(" + (0) + "px)";
							this.imgs[rimg].style.zIndex = 1;
							this.imgs[rimg].querySelector('.div').style.zIndex = 1
							this.imgs[limg].style.zIndex = -2 * (i + 1);
							this.imgs[limg].querySelector('.div').style.zIndex = -2 * (i + 1);
						} else {
							this.imgs[limg].style.transform = "translateX(" + (+this.imgsWidth * (i + 1)) + "px)" + " " +
								"translateZ(" + (0) + "px)";
							this.imgs[rimg].style.transform = "translateX(" + (-this.imgsWidth * (i + 1)) + "px)" + " " +
								"translateZ(" + (0) + "px)";
							this.imgs[limg].style.zIndex = 1;
							this.imgs[rimg].style.zIndex = -2 * (i + 1);
						}

					}

					console.log(this.imgs[this.current].style.transform, 9999);
					this.imgs[this.current].style.transform = "translateZ(0px)";
					this.imgs[this.current].style.zIndex = 1
				}
			}
			var contanier = document.querySelector('.box')
			var imgs = document.querySelectorAll(".imgboxs")
			console.log(imgs, 'imgsimgs')
			let imgsWidth = getComputedStyle(imgs[0]).width.replace('px', '');
			console.log(imgsWidth, 7666)
			var btns = document.querySelectorAll("span")
			//var ul = document.querySelector(".points")
			//var lis = document.getElementsByTagName("li")
			var timer
			var current = 0 // 当前播放图片的索引
			var flag = true //点击防抖节流
			let duration = 3000;
			let isAutoplay = false;
			let direction = 'left'
			new Swiper3D(contanier, imgs, btns, current, isAutoplay, flag, duration, imgsWidth, direction)
		},
		methods: {

		}
	}
</script>

<style>
	.sdf {
		width: 1200px;
		margin-bottom: 50px;

		.box {
			position: relative;
			width: 1200px;
			height: 500px;
			top: 200px;
			margin: auto;
			overflow: hidden;
		}

		.warpper {
			position: absolute;
			width: 1200px;
			height: 100%;
			transform-style: preserve-3d;
			margin: auto;
			left: 0;
			right: 0;
		}

		.box .warpper img {
			width: 224px;
			height: 126px;
			border-radius: 4px;

		}

		.box .warpper .imgboxs {
			margin-left: 10px;
			width: 224px;
			height: 126px;
			border-radius: 4px;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			background-color: #FFF;
			padding: 0 5px;
			transition: all 0.5s ease-in-out;
			box-sizing: border-box;
		}

		.box .warpper .imgboxs .div {
			text-align: center;
			position: relative;
			background-color: #fff;
			overflow: hidden;
		}

		.box:hover .btn {
			display: block;
		}

		.btn {
			position: relative;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -20px);
			display: none;
		}

		.btn .left,
		.btn .right {
			height: 50px;
			width: 50px;
			font-size: 30px;
			text-align: center;
			line-height: 50px;
			background-color: black;
			color: #fff;
			font-weight: 700;
			border-radius: 15%;
			position: absolute;
		}

		.btn .left {
			left: 0px;
		}

		.btn .right {
			right: 0;
		}

		.btn span:hover {
			background-color: rgba(0, 0, 0, 0.8);
		}

		.points {
			position: absolute;
			left: 50%;
			bottom: 10px;
			transform: translate(-50%, 200px);
			height: 14px;
		}

		.points li {
			display: inline-block;
			list-style: none;
			width: 14px;
			height: 14px;
			border: 1px solid #000;
			border-radius: 50%;
			background-color: white;
			margin: 0 5px;
		}

		.points .current {
			background-color: red;
		}
	}
</style>